<template>
  <div>
    <InputGroup compact>
      <Select v-model:value="dimOrExact">
        <SelectOption value="1">模糊</SelectOption>
        <SelectOption value="2">精确</SelectOption>
      </Select>
      <Input
        style="width: 50%"
        placeholder="请输入查询条件"
        v-model:value="queryValue"
        allowClear
      />
      <a-button type="dashed" v-show="dimOrExact === '2'" @click="changeExactModal">选择</a-button>
      <a-button type="primary" style="margin-left: 10px">查询</a-button>
    </InputGroup>

    <!-- 精确弹窗 -->
    <ExactModal @register="registerExactModal" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useModal } from '/@/components/Modal';
  import { InputGroup, Select, SelectOption, Input } from 'ant-design-vue';

  import ExactModal from './exactModal.vue';

  const dimOrExact = ref<string>('1');
  const queryValue = ref<string>('');

  const changeExactModal = () => {
    openExactModal();
  };

  const [registerExactModal, { openModal: openExactModal }] = useModal();
</script>

<style scoped></style>
